<template>
  <div id="box" :class="modalClass" :msg="msg" :confirmBtn='confirmBtn' :cfTitle="cfTitle">
    <div id="content"  @click.stop="">
      <button class="closeWindow" @click="cancel">
        <svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
          <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z">
          </path>
        </svg>
      </button>
      <p v-if="title" class="title">{{title}}</p>
      <span class="toastText" v-html="reminderInfo">
        <!--          {{reminderInfo}}-->
      </span>
      <div class="setting">
        <button class="cancel" @click.stop="cancel">取消</button>
        <button class="sure" @click.stop="callback">{{submitTxt}}</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "confirmDialog",
    data() {
      return {
        introduce: '确认弹窗',
        modalClass : 'modal-hide',
        showCover: false,
        reminderInfo: '',
        timeout: '', //定时器
        submitTxt: '',
        title : null
      }
    },
    props: {
      'msg': {
        /*组件中配置的提示文字*/
        type: String,
        default: '提示文字'
      },
      'confirmBtn': {
        /*确定按钮文字*/
        type: String,
        default: '确定'
      },
      'cfTitle':{
        /*标题*/
        type: String,
        default: null
      }
    },
    mounted() {
      this.reminderInfo = this.msg ? this.msg : '提示文字';
      this.title = this.cfTitle ? this.cfTitle : '提示';
      this.submitTxt = this.confirmBtn ? this.confirmBtn : '确定';
      this.$emit('success');
    },
    methods: {
      changeToast(mes) {
        //动态改变提示信息
        // this.$refs.dl.changeToast('aaaa');
        if (mes) {
          this.reminderInfo = mes;
        }
      },
      callback() {
        /*点击确定*/
        this.hide();
        this.$emit('confirm'); /*组件调用方法： @confirm='function'*/
      },
      cancel(){
        this.hide();
        this.$emit('cancel'); /*组件调用方法： @cancel='function'*/
      },
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      dialogShow() {
        /*显示弹窗*/
        this.show();
      }
    },
    destroyed() {
      this.hide();
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/animate.css";
  #box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
  }
  #content{
   width: 510px;margin-top: -150px;margin-left: -255px;left: 50%;top: 50%;padding: 35px 0;min-height: 228px;
   overflow:hidden;background: #fff;.borderRadius;position: absolute;padding-bottom: 60px;
    .title{
      text-align: center;padding-top: 17px;padding-bottom: 0px;font-size: 20px;
    }
    .warnIcon{
      text-align: center;padding-bottom: 20px;
      >img{
        width: 35px;height:35px;border-radius: 50%;overflow: hidden;}
      }
      .toastText{
        text-align: center;font-size:16px;display: block;line-height: 170%;padding-bottom: 25px;padding-top: 25px;font-size: 16px;
        display: block;color: #666;
      }
      .setting{
        text-align: center;width:100%;height: 60px;background: #fff;position: absolute;z-index: 1;bottom: 0;left:0;overflow: hidden;
      .sure{
        .submit();margin: 0;font-size: 16px;padding:0px 31px;display: inline-block;line-height: 38px;
        .borderRadius;height: 38px;box-sizing: border-box;border: 1px solid#FFD203;margin-left: 12px;width: 160px;box-sizing: border-box;
      }
      .cancel{
        margin: 0;font-size: 16px;padding:0px 31px;display: inline-block;line-height: 35px;
        .borderRadius;height: 38px;box-sizing: border-box;box-sizing: border-box;
        background: #fff;color: #636363;border: 1px solid#E5E5E5;margin-left: 0;margin-right: 12px;width: 160px;}
      }
      .closeWindow{
       padding: 11px;position: absolute;right: 0;top:0;background: none;
        img{width: 13px;height: 13px};color: rgba(0, 0, 0, 0.45);font-size: 18px;
        &:hover{
          color: rgba(0, 0, 0, 0.75);
        }
      }
  }
</style>
